<template>
  <!-- 售后-用户信息查询 -->
  <div class="tabs_main">
    <el-form
      :inline="true"
      :model="elform"
      class="demo-form-inline"
      size="mini"
      ref="elform"
      :rules="rules"
    >
      <el-form-item label-width="110px" prop="userData">
        <el-input
          v-model="elform.userData"
          placeholder="请输入卡号或名字或手机号"
          style="width: 250px"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item class="searchmarigin">
        <el-button type="primary" @click="getUserInfo" size="mini" icon="el-icon-search">查询</el-button>
      </el-form-item>
      <el-form-item class="searchmarigin" v-if="activeName == 'first'">
        <el-button type="primary" @click="onExport()" size="mini" icon="el-icon-document-copy">导出</el-button>
        <el-button type="primary" @click="onExport('print')" size="mini" icon="el-icon-printer">打印</el-button>
      </el-form-item>
      <el-form-item v-if="activeName == 'first' ? true : false">
        <el-popover width="550" placement="top" trigger="click">
          <el-row>
            <el-col :span="6" v-for="item in Object.keys(formThead)" :key="item">
              <el-checkbox
                :label="formThead[item].label"
                v-model="formThead[item].checked"
                @change="checkboxChanged()"
              ></el-checkbox>
            </el-col>
          </el-row>
          <el-button slot="reference" size="mini" type="primary" icon="el-icon-edit-outline">自定义</el-button>
        </el-popover>
      </el-form-item>
      <el-form-item v-if="activeName == 'second'">
        <el-button
          type="primary"
          @click="onRechargeExport()"
          size="mini"
          icon="el-icon-document-copy"
        >导出</el-button>
        <el-button
          type="primary"
          @click="onRechargeExport('print')"
          size="mini"
          icon="el-icon-printer"
        >打印</el-button>
      </el-form-item>
      <el-form-item v-if="activeName == 'second' ? true : false">
        <el-popover width="550" placement="top" trigger="click">
          <el-row>
            <el-col :span="6" v-for="item in Object.keys(formThead2)" :key="item">
              <el-checkbox
                :label="formThead2[item].label"
                v-model="formThead2[item].checked"
                @change="checkboxChanged2()"
              ></el-checkbox>
            </el-col>
          </el-row>
          <el-button slot="reference" size="mini" type="primary" icon="el-icon-edit-outline">自定义</el-button>
        </el-popover>
      </el-form-item>
    </el-form>
    <el-form
      :inline="true"
      :model="userForm"
      class="demo-form-inline"
      size="mini"
      :label-position="labelPosition"
      label-width="80px"
      v-if="userForm == null ? false : true"
    >
      <el-row>
        <el-col :span="6">
          <el-form-item label="学校" prop="unitName">
            {{
            userForm.unitName
            }}
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="班级" prop="departmentName">
            {{
            userForm.departmentName
            }}
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="姓名" prop="name">
            {{
            userForm.userName
            }}
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="性别" prop="userSex">
            {{
            userForm.userSex == 0 ? "男" : "女"
            }}
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form-item label="卡号" prop="cardNumber">
            {{
            userForm.cardNumber
            }}
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="卡余额" prop="cardBalance">
            {{
            userForm.cardBalance | amountyuan
            }}
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="卡状态" prop="cardState">
            {{
            userForm.cardState == 1 ? "挂失" : "正常"
            }}
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="手机号" prop="phoneNumber">
            {{
            userForm.phoneNumber
            }}
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form-item label="身份证" prop="idCard">
            {{
            userForm.idCard
            }}
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="出生年月" prop="birthday">
            {{
            userForm.birthday
            }}
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-tabs type="border-card" v-model="activeName">
      <el-tab-pane label="消费明细" name="first">
        <div v-if="Flagcheck">
          <el-form
            :inline="true"
            :model="elform"
            class="demo-form-inline"
            size="mini"
            v-if="Flagcheck"
          >
            <el-form-item label="开始日期:">
              <el-date-picker
                v-model="datetime[0]"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="开始日期"
                style="width: 130px"
                size="mini"
                :clearable="false"
                @change="consumptionTime"
              ></el-date-picker>
              <el-time-picker
                style="width:110px"
                v-model="time[0]"
                value-format="HH:mm:ss"
                placeholder="开始时间"
                :clearable="false"
                size="mini"
                @change="consumptionTime"
              ></el-time-picker>
            </el-form-item>
            <el-form-item label="结束日期:">
              <el-date-picker
                v-model="datetime[1]"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="结束日期"
                style="width: 130px"
                size="mini"
                :clearable="false"
                @change="consumptionTime"
              ></el-date-picker>
              <el-time-picker
                style="width:110px"
                v-model="time[1]"
                value-format="HH:mm:ss"
                placeholder="结束时间"
                :clearable="false"
                size="mini"
                @change="consumptionTime"
              ></el-time-picker>
            </el-form-item>
          </el-form>
          <el-table
            v-loading="loading"
            :data="consumptionList"
            ref="table"
            border
            highlight-current-row
            style="width: 100%"
            :header-cell-style="headFirst"
            :cell-style="(res) => headFirst_col(res, [])"
          >
            <el-table-column
              prop="cardNumber"
              label="卡号"
              align="center"
              min-width="110px"
              v-if="formThead.cardNumber.checked"
            ></el-table-column>
            <el-table-column
              prop="originBalance"
              label="原卡余额(元)"
              align="center"
              min-width="110px"
              v-if="formThead.originBalance.checked"
            >
              <template slot-scope="scope">
                <div>{{ scope.row.originBalance | amountyuan }}</div>
              </template>
            </el-table-column>
            <el-table-column
              prop="expenditure"
              label="消费金额(元)"
              align="center"
              min-width="110px"
              v-if="formThead.expenditure.checked"
            >
              <template slot-scope="scope">
                <div>{{ scope.row.expenditure | amountyuan }}</div>
              </template>
            </el-table-column>

            <el-table-column
              prop="newBalance"
              label="余额(元)"
              align="center"
              v-if="formThead.newBalance.checked"
            >
              <template slot-scope="scope">
                <div>{{ scope.row.newBalance | amountyuan }}</div>
              </template>
            </el-table-column>

            <el-table-column
              prop="dataMakeTime"
              label="消费时间"
              align="center"
              min-width="160px"
              v-if="formThead.dataMakeTime.checked"
            ></el-table-column>

            <el-table-column
              prop="isSuccess"
              label="交易状态"
              align="center"
              v-if="formThead.isSuccess.checked"
            >
              <template slot-scope="scope">
                <div>{{ scope.row.isSuccess | isSuccesstype }}</div>
              </template>
            </el-table-column>

            <el-table-column
              prop="useType"
              label="消费类型"
              align="center"
              v-if="formThead.useType.checked"
            >
              <template slot-scope="scope">
                <div>{{ scope.row.useType | filterchargingType }}</div>
              </template>
            </el-table-column>
            <el-table-column
              prop="serialNumber"
              label="卡片流水号"
              align="center"
              v-if="formThead.serialNumber.checked"
            ></el-table-column>
            <el-table-column
              prop="tradeSerialNumber"
              label="交易流水号"
              align="center"
              v-if="formThead.tradeSerialNumber.checked"
            ></el-table-column>
            <el-table-column
              prop="terminalCode"
              label="设备编号"
              align="center"
              v-if="formThead.terminalCode.checked"
            ></el-table-column>
            <el-table-column prop="place" label="场所" align="center" v-if="formThead.place.checked"></el-table-column>
            <el-table-column
              prop="dataType"
              label="数据类型"
              align="center"
              min-width="110px"
              v-if="formThead.dataType.checked"
            ></el-table-column>
          </el-table>
        </div>
        <div class="page">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChangepage"
            :current-page="currentPage"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="recordCount"
          ></el-pagination>
        </div>
      </el-tab-pane>
      <el-tab-pane label="充值明细" name="second">
        <div v-if="Flagcheck">
          <el-form
            :inline="true"
            :model="elform"
            class="demo-form-inline"
            size="mini"
            v-if="Flagcheck"
          >
            <el-form-item label="开始日期:">
              <el-date-picker
                v-model="rechargeTime[0]"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="开始日期"
                style="width: 130px"
                size="mini"
                :clearable="false"
                @change="rechargeTimeChange"
              ></el-date-picker>
              <el-time-picker
                style="width:110px"
                v-model="rtime[0]"
                value-format="HH:mm:ss"
                placeholder="开始时间"
                :clearable="false"
                size="mini"
                @change="rechargeTimeChange"
              ></el-time-picker>
            </el-form-item>
            <el-form-item label="结束日期:">
              <el-date-picker
                v-model="rechargeTime[1]"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="结束日期"
                style="width: 130px"
                size="mini"
                :clearable="false"
                @change="rechargeTimeChange"
              ></el-date-picker>
              <el-time-picker
                style="width:110px"
                v-model="rtime[1]"
                value-format="HH:mm:ss"
                placeholder="结束时间"
                :clearable="false"
                size="mini"
                @change="rechargeTimeChange"
              ></el-time-picker>
            </el-form-item>
          </el-form>
          <el-table
            v-loading="loading"
            :data="rechargeList"
            ref="rechargeTable"
            border
            highlight-current-row
            style="width: 100%"
            :header-cell-style="headFirst"
            :cell-style="(res) => headFirst_col(res, [])"
          >
            <el-table-column
              prop="cardNumber"
              label="卡号"
              align="center"
              min-width="110px"
              v-if="formThead2.cardNumber.checked"
            ></el-table-column>
            <el-table-column
              prop="rechargeSerial"
              label="充值序列号"
              align="center"
              min-width="110px"
              v-if="formThead2.rechargeSerial.checked"
            ></el-table-column>
            <el-table-column
              prop="rechargeAmount"
              label="充值金额"
              align="center"
              v-if="formThead2.rechargeAmount.checked"
            >
              <template slot-scope="scope">
                <div>{{ scope.row.rechargeAmount | amountyuan }}</div>
              </template>
            </el-table-column>
            <el-table-column
              prop="balance"
              label="充值后金额"
              align="center"
              v-if="formThead2.balance.checked"
            >
              <template slot-scope="scope">
                <div>{{ scope.row.balance | amountyuan }}</div>
              </template>
            </el-table-column>

            <el-table-column
              prop="rechargeMode"
              label="充值模式"
              align="center"
              v-if="formThead2.rechargeMode.checked"
            >
              <template slot-scope="scope">
                <span>{{ scope.row.rechargeMode | rechargeModeType }}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="walletName"
              label="钱包名称"
              align="center"
              v-if="formThead2.walletName.checked"
            ></el-table-column>
            <el-table-column
              prop="rechargeState"
              label="充值状态"
              align="center"
              v-if="formThead2.rechargeState.checked"
            >
              <template slot-scope="scope">
                <span>{{ scope.row.rechargeState | rechargeStateType }}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="paymentTime"
              label="支付时间"
              align="center"
              min-width="168"
              v-if="formThead2.paymentTime.checked"
            ></el-table-column>
            <el-table-column
              prop="successTime"
              label="到账时间"
              align="center"
              min-width="168"
              v-if="formThead2.successTime.checked"
            ></el-table-column>
            <el-table-column
              prop="syncState"
              label="同步标志"
              align="center"
              v-if="formThead2.syncState.checked"
            >
              <template slot-scope="scope">
                <span>
                  {{
                  scope.row.syncState == "0" ? "未同步" : "已同步"
                  }}
                </span>
              </template>
            </el-table-column>
          </el-table>
        </div>

        <div class="page">
          <el-pagination
            @size-change="rechargeChange"
            @current-change="rechargeChangepage"
            :current-page="rechargePage"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="rechargeSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="recordCount1"
          ></el-pagination>
        </div>
      </el-tab-pane>
    </el-tabs>

    <!-- 弹窗 -->
    <el-dialog
      width="800px"
      custom-class="customWidth"
      center
      :before-close="closeDialog"
      title="人员信息"
      :close-on-click-modal="false"
      append-to-body
      :visible.sync="addDialogFormVisible"
      min-width="600px"
    >
      <el-table
        v-loading="loading"
        :data="userInfo"
        ref="table"
        border
        highlight-current-row
        style="width: 100%; margin-left: -30px"
        max-height="450"
        :header-cell-style="headFirst"
            :cell-style="(res) => headFirst_col(res, [])"

      >
        <el-table-column prop="unitName" label="学校" align="center"></el-table-column>
        <el-table-column prop="departmentName" label="班级" align="center"></el-table-column>
        <el-table-column prop="userName" label="姓名" align="center"></el-table-column>
        <el-table-column prop="cardNumber" label="卡号" align="center"></el-table-column>
        <el-table-column fixed="right" label="操作" width="100" align="center">
          <template slot-scope="scope">
            <el-button @click="handle(scope.row)" type="text" size="small">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      labelPosition: 'right',
      // 弹窗
      addDialogFormVisible: false,
      // 查询表单
      elform: { userData: '' },
      rules: {
        userData: [
          { required: true, message: '请输入查询信息', trigger: 'blur' }
        ]
      },
      userForm: null,
      userInfo: {},
      // tabs控制属性
      activeName: 'first',
      Flagcheck: true,

      // 是否显示个人信息
      isInfo: false,
      // 时间限定
      datetime: [],
      time: [],
      formThead: {
        cardNumber: { label: '卡号', prop: 'cardNumber', checked: true },
        originBalance: {
          label: '原卡余额(元)',
          prop: 'originBalance',
          checked: true
        },
        expenditure: {
          label: '消费金额(元)',
          prop: 'expenditure',
          checked: true
        },
        newBalance: { label: '余额(元)', prop: 'newBalance', checked: true },
        dataMakeTime: {
          label: '消费时间',
          prop: 'dataMakeTime',
          checked: true
        },
        isSuccess: { label: '交易状态', prop: 'isSuccess', checked: true },
        useType: { label: '消费类型', prop: 'useType', checked: true },
        serialNumber: {
          label: '卡片流水号',
          prop: 'serialNumber',
          checked: true
        },
        tradeSerialNumber: {
          label: '交易流水号',
          prop: 'tradeSerialNumber',
          checked: true
        },
        terminalCode: {
          label: '设备编号',
          prop: 'terminalCode',
          checked: true
        },
        place: { label: '场所', prop: 'place', checked: true },
        dataType: { label: '数据类型', prop: 'dataType', checked: true }
      },
      // 消费明细列表
      consumptionList: [],
      // 消费明细列表
      filename: '消费明细表',
      // 充值时间限制
      rechargeTime: [],
      rtime: [],

      // 充值明细
      rechargeList: [],

      loading: false,
      /**
       * 消费明细分页参数
       */
      pageNum: 1,
      pageSize: 20,
      currentPage: 1,
      recordCount: 0,
      /**
       * 充值明细
       */
      rechargeNum: 1,
      rechargePage: 1,
      rechargeSize: 20,
      recordCount1: 0,
      formThead2: {
        cardNumber: { label: '卡号', prop: 'cardNumber', checked: true },
        rechargeSerial: {
          label: '充值序列号',
          prop: 'rechargeSerial',
          checked: true
        },
        rechargeAmount: {
          label: '充值序列号',
          prop: 'rechargeAmount',
          checked: true
        },
        balance: { label: '充值后金额', prop: 'balance', checked: true },
        rechargeMode: {
          label: '充值模式',
          prop: 'rechargeMode',
          checked: true
        },
        walletName: { label: '钱包名称', prop: 'walletName', checked: true },
        rechargeState: {
          label: '充值状态',
          prop: 'rechargeState',
          checked: true
        },
        paymentTime: { label: '支付时间', prop: 'paymentTime', checked: true },
        successTime: { label: '到账时间', prop: 'successTime', checked: true },
        syncState: { label: '同步标志', prop: 'syncState', checked: true }
      },
      filename2: '充值明细表'
    }
  },
  computed: {
    changeschoolid: {
      get() {
        return this.$store.state.user.changeschoolid
      }
    }
  },
  filters: {
    rechargeStateType(val) {
      if (val == 0) {
        return '未下发'
      }
      if (val == 1) {
        return '执行成功'
      }
      if (val == 2) {
        return '执行失败'
      }
      if (val == 3) {
        return '已合并'
      }
    },
    rechargeModeType(mode) {
      if (mode == '0') {
        return '本地充值'
      } else if (mode == '1') {
        return '平台账户充值'
      } else if (mode == '2') {
        return '支付宝充值'
      } else if (mode == '3') {
        return '充值机充值'
      } else if (mode == '4') {
        return '充值合并'
      } else if (mode == '6') {
        return '微信充值'
      }
    }
  },
  created() {
    this.userGuid = sessionStorage.getItem('administrator')
  },
  mounted() {
    this.datetime = [this.getNowTime('yy-mm-dd'), this.getNowTime('yy-mm-dd')]
    this.time = ['00:00:00', '23:59:59']

    this.rechargeTime = [
      this.getNowTime('yy-mm-dd'),
      this.getNowTime('yy-mm-dd')
    ]
    this.rtime = ['00:00:00', '23:59:59']
  },

  methods: {
    // 用户信息
    getUserInfo() {
      this.$refs['elform'].validate(valid => {
        if (valid) {
          this.$http({
            url: this.$http.adornUrl(
              '/api/v1/Student/student-user-brief-search'
            ),
            method: 'post',
            data: this.$http.adornData({
              messageContent: {
                operatorGuid: this.userGuid,
                userData: this.elform.userData
              },
              messageType: 0
            })
          }).then(({ data }) => {
            if (data.messageCode == 200) {
              this.pageNum = 1
              this.rechargeNum = 1
              if (data.messageContent.length > 1) {
                this.userInfo = data.messageContent
                this.addDialogFormVisible = true
              } else if (data.messageContent.length == 1) {
                this.userForm = data.messageContent[0]
                if (this.activeName == 'first') {
                  // 消费
                  this.getConsumption()
                } else {
                  // 充值
                  this.rechargeTimeChange()
                }
              } else {
                this.$message({
                  message: '暂时没有此人',
                  type: 'warning'
                })
                this.userForm = null
                // 消费
                this.consumptionList = []
                // 充值
                this.rechargeList = []
              }
            } else {
              this.$message.error(data.errorMessage)
            }
          })
        } else {
          return false
        }
      })
    },
    /**
     * 弹窗
     */
    // 右方插插
    closeDialog(done) {
      this.addDialogFormVisible = false
      done()
    },
    // 选择
    handle(val) {
      this.userForm = { ...val }
      if (
        this.datetime == null ||
        this.datetime.length == 0 ||
        this.rechargeTime == null
      ) {
        this.$message({
          message: '请选择时间',
          type: 'warning'
        })
      } else {
        if (this.activeName == 'first') {
          // 消费
          this.getConsumption()
        } else {
          // 充值
          this.rechargeTimeChange()
        }
      }

      this.addDialogFormVisible = false
    },
    // 时间选择触发
    consumptionTime() {
      this.pageNum = 1
      if (this.userForm == null) {
        this.$message({
          message: '请选择要查询的人',
          type: 'warning'
        })
      }
      if (this.datetime == null) {
        this.$message({
          message: '请选择时间',
          type: 'warning'
        })
      } else {
        this.getConsumption()
      }
    },
    // 打印需要用到的函数
    formatJson(filterVal, jsonData) {
      return jsonData.map(v =>
        filterVal.map(j => {
          if (j === 'timestamp') {
            return parseTime(v[j])
          } else {
            return v[j]
          }
        })
      )
    },
    /**
     *
     */
    // 消费模块重新渲染
    checkboxChanged() {
      this.$nextTick(() => {
        this.$refs['table'].doLayout()
      })
    },
    // 消费明细
    getConsumption() {
      if (this.datetime == null || this.datetime.length == 0) {
        this.$message({
          message: '请选择时间',
          type: 'warning'
        })
      }
      if (this.userForm) {
        this.searchInfo = {
          userGuid: this.userForm.userGuid,
          startTime: this.datetime[0] + ' ' + this.time[0],
          endTime: this.datetime[1] + ' ' + this.time[1]
        }
        this.$http({
          url: this.$http.adornUrl(
            '/terminal/consume/consume-and-water-details-page'
          ),
          method: 'post',
          data: this.$http.adornData({
            messageContent: {
              asc: true,
              pageNum: this.pageNum,
              pageSize: this.pageSize,
              searchInfo: this.searchInfo
            },
            messageType: 0
          })
        }).then(({ data }) => {
          if (data.messageCode == 200) {
            this.consumptionList = data.messageContent.data || []
            this.recordCount = data.messageContent.recordCount
            this.currentPage = data.messageContent.pageNum
            if (this.consumptionList.length == 0) {
              this.$message({
                message: '查询成功当前暂无数据',
                type: 'success'
              })
            }
          } else {
            this.$message.error(data.errorMessage)
          }
        })
      }
    },

    async onExport(type) {
      if (this.consumptionList.length == 0) {
        this.$message({
          message: '请查询数据后,在进行此操作',
          type: 'warning'
        })
        return false
      }
      // 获取所有个人用水汇总数据
      await this.getAll()
      if (type == 'print') {
        this.printDailyJS()
      } else {
        this.export2Excel()
      }
    },
    // 获取所有消费明细数据
    getAll() {
      let _this = this
      return new Promise(function(resolve, reject) {
        _this
          .$http({
            url: _this.$http.adornUrl(
              '/terminal/consume/consume-and-water-details-page'
            ),
            method: 'post',
            data: _this.$http.adornData({
              messageContent: {
                pageNum: 1,
                pageSize: _this.recordCount,
                searchInfo: _this.searchInfo
              },
              messageType: 0
            })
          })
          .then(({ data }) => {
            if (data.messageCode == 200) {
              _this.exportlist = data.messageContent.data
              _this.exportlist.map(item => {
                item.originBalance = _this.$options.filters.amountyuan(
                  item.originBalance
                )
                item.expenditure = _this.$options.filters.amountyuan(
                  item.expenditure
                )
                item.newBalance = _this.$options.filters.amountyuan(
                  item.newBalance
                )
                item.isSuccess = _this.$options.filters.isSuccesstype(
                  item.isSuccess
                )
                item.useType = _this.$options.filters.filterchargingType(
                  item.useType
                )
              })
              resolve(_this.exportlist)
            } else {
              _this.$message.error(data.errorMessage)

              reject(data.errorMessage)
            }
          })
      })
    },
    // 导出
    export2Excel() {
      const nowtime = this.getimeto()
      require.ensure([], () => {
        const { export_json_to_excel } = require('../../excel/Export2Excel')
        const multiHeader = []
        const multiHeader2 = []
        const merges = []
        let tHeaderarr = []
        for (let key in this.formThead) {
          if (this.formThead[key].checked) {
            tHeaderarr.push(this.formThead[key].label)
          }
        }
        const tHeader = tHeaderarr
        //
        let filterValArr = []
        for (let key in this.formThead) {
          if (this.formThead[key].checked) {
            filterValArr.push(this.formThead[key].prop)
          }
        }
        const filterVal = filterValArr
        const list = this.exportlist
        const data = this.formatJson(filterVal, list)
        export_json_to_excel({
          multiHeader, //这里是第一行的表头
          multiHeader2, //这里是第二行的表头
          header: tHeader, //这里应该是算第三行的表头
          data,
          merges,
          filename: this.elform.userData + '-' + this.filename + nowtime
        })
      })
    },
    // 打印相关
    printDailyJS() {
      let someJSONdata = this.exportlist
      const title = this.elform.userData + '-' + this.filename
      this.unitName = sessionStorage.getItem('unitName')
      this.loginName = sessionStorage.getItem('username')
      const properties = []
      for (let key in this.formThead) {
        if (this.formThead[key].checked) {
          if (this.formThead[key].prop == 'dataMakeTime') {
            properties.push({
              displayName: this.formThead[key].label,
              field: this.formThead[key].prop,
              columnSize: 150 / (Object.keys(this.formThead).length + 1) + '%'
            })
          } else {
            properties.push({
              displayName: this.formThead[key].label,
              field: this.formThead[key].prop,
              columnSize: 100 / (Object.keys(this.formThead).length + 1) + '%'
            })
          }
        }
      }
      // 打印
      this.$printJS({
        // 眉头
        documentTitle: `${this.unitName}`,
        /**
         * 获取表头的信息
         * @param {*} title 表名
         * @param {*} unitName 单位
         * @param {*} time 时间
         */
        header: this.printHeader(
          title,
          this.unitName,
          `${this.formatDate(
            new Date(this.searchInfo.startTime),
            'yyyy-MM-dd'
          )} 至 ${this.formatDate(
            new Date(this.searchInfo.endTime),
            'yyyy-MM-dd'
          )}`
        ),
        printable: someJSONdata,
        properties: properties,
        type: 'json',
        // 是否每页都显示头部
        // repeatTableHeader:false,
        headerRow: 1,
        /**
         * 获取页脚的信息
         * @param {*} loginName 制表人：
         * @param {*} time 时间
         */
        endPage: this.printFloor(
          this.loginName,
          this.getNowTime('yy-mm-dd hh:mm:ss')
        ),
        //  获取页脚的信息样式
        style: this.printFloorStyle()
      })
    },

    handleSizeChange(val) {
      this.pageSize = val
      this.getConsumption()
    },
    handleCurrentChangepage(val) {
      this.pageNum = val
      this.getConsumption()
    },
    getHeaderDate(val) {
      this.formThead = val
    },
    /**
     * 充值模块
     */
    // 充值模块重新渲染
    checkboxChanged2() {
      this.$nextTick(() => {
        this.$refs['rechargeTable'].doLayout()
      })
    },
    rechargeTimeChange() {
      this.rechargeNum = 1
      if (this.rechargeTime == null) {
        this.$message({
          message: '请选择时间',
          type: 'warning'
        })
      } else {
        this.getRecharge()
      }
    },
    // 充值列表
    getRecharge() {
      if (this.userForm) {
        this.searchInfo2 = {
          unitGuid: this.userForm.unitGuid,
          userGuid: this.userForm.userGuid,
          startTime: this.rechargeTime[0]+ ' ' + this.rtime[0],
          endTime: this.rechargeTime[1]+ ' ' + this.rtime[1]
        }
        this.$http({
          url: this.$http.adornUrl(
            '/terminal/consume/consume-user-recharge-page'
          ),
          method: 'post',
          data: this.$http.adornData({
            messageContent: {
              asc: true,
              pageNum: this.rechargeNum,
              pageSize: this.rechargeSize,
              searchInfo: this.searchInfo2
            },
            messageType: 0
          })
        }).then(({ data }) => {
          if (data.messageCode == 200) {
            this.rechargeList = data.messageContent.data
            // this.consumptionList = data.messageContent.data;
            this.recordCount1 = data.messageContent.recordCount
            this.rechargePage = data.messageContent.pageNum
            if (this.rechargeList.length == 0) {
              this.$message({
                message: '查询成功当前暂无数据',
                type: 'success'
              })
            }
          }
        })
      }
    },
    async onRechargeExport(type) {
      if (this.rechargeList.length == 0) {
        this.$message({
          message: '请查询数据后,在进行此操作',
          type: 'warning'
        })
        return false
      }
      // 获取所有充值列表数据
      await this.getRechargeAll()
      if (type == 'print') {
        this.printRechargeDailyJS()
      } else {
        this.exportRechargeExcel()
      }
    },

    // 获取所有充值列表数据
    getRechargeAll() {
      let _this = this
      return new Promise(function(resolve, reject) {
        _this
          .$http({
            url: _this.$http.adornUrl(
              '/terminal/consume/consume-user-recharge-page'
            ),
            method: 'post',
            data: _this.$http.adornData({
              messageContent: {
                pageNum: 1,
                pageSize: _this.recordCount1,
                searchInfo: _this.searchInfo2
              },
              messageType: 0
            })
          })
          .then(({ data }) => {
            if (data.messageCode == 200) {
              _this.exportRechargelist = data.messageContent.data
              _this.exportRechargelist.map(item => {
                item.rechargeAmount = _this.$options.filters.amountyuan(
                  item.rechargeAmount
                )
                item.balance = _this.$options.filters.amountyuan(item.balance)

                item.rechargeMode = _this.$options.filters.rechargeModeType(
                  item.rechargeMode
                )
                item.rechargeState = _this.$options.filters.rechargeStateType(
                  item.rechargeState
                )
                item.syncState = item.syncState == '0' ? '未同步' : '已同步'
              })

              resolve(_this.exportlist)
            } else {
              _this.$message.error(data.errorMessage)

              reject(data.errorMessage)
            }
          })
      })
    },
    // 导出
    exportRechargeExcel() {
      const nowtime = this.getimeto()
      require.ensure([], () => {
        const { export_json_to_excel } = require('../../excel/Export2Excel')
        const multiHeader = []
        const multiHeader2 = []
        const merges = []
        let tHeaderarr = []
        for (let key in this.formThead2) {
          if (this.formThead2[key].checked) {
            tHeaderarr.push(this.formThead2[key].label)
          }
        }
        const tHeader = tHeaderarr
        //
        let filterValArr = []
        for (let key in this.formThead2) {
          if (this.formThead2[key].checked) {
            filterValArr.push(this.formThead2[key].prop)
          }
        }
        const filterVal = filterValArr
        const list = this.exportRechargelist
        const data = this.formatJson(filterVal, list)
        export_json_to_excel({
          multiHeader, //这里是第一行的表头
          multiHeader2, //这里是第二行的表头
          header: tHeader, //这里应该是算第三行的表头
          data,
          merges,
          filename: this.elform.userData + '-' + this.filename2 + nowtime
        })
      })
    },
    // 打印相关
    printRechargeDailyJS() {
      let someJSONdata = this.exportRechargelist
      const title = this.elform.userData + '-' + this.filename2
      this.unitName = sessionStorage.getItem('unitName')
      this.loginName = sessionStorage.getItem('username')
      const properties = []
      for (let key in this.formThead2) {
        if (this.formThead2[key].checked) {
          if (
            this.formThead2[key].prop == 'paymentTime' ||
            this.formThead2[key].prop == 'successTime'
          ) {
            properties.push({
              displayName: this.formThead2[key].label,
              field: this.formThead2[key].prop,
              columnSize: 150 / (Object.keys(this.formThead2).length + 2) + '%'
            })
          } else {
            properties.push({
              displayName: this.formThead2[key].label,
              field: this.formThead2[key].prop,
              columnSize: 100 / (Object.keys(this.formThead2).length + 2) + '%'
            })
          }
        }
      }
      // 打印
      this.$printJS({
        // 眉头
        documentTitle: `${this.unitName}`,
        /**
         * 获取表头的信息
         * @param {*} title 表名
         * @param {*} unitName 单位
         * @param {*} time 时间
         */
        header: this.printHeader(
          title,
          this.unitName,
          `${this.formatDate(
            new Date(this.searchInfo2.startTime),
            'yyyy-MM-dd'
          )} 至 ${this.formatDate(
            new Date(this.searchInfo2.endTime),
            'yyyy-MM-dd'
          )}`
        ),
        printable: someJSONdata,
        properties: properties,
        type: 'json',
        // 是否每页都显示头部
        // repeatTableHeader:false,
        headerRow: 1,
        /**
         * 获取页脚的信息
         * @param {*} loginName 制表人：
         * @param {*} time 时间
         */
        endPage: this.printFloor(
          this.loginName,
          this.getNowTime('yy-mm-dd hh:mm:ss')
        ),
        //  获取页脚的信息样式
        style: this.printFloorStyle()
      })
    },
    rechargeChange(val) {
      this.rechargeSize = val
      this.getRecharge()
    },
    rechargeChangepage(val) {
      this.rechargeNum = val
      this.getRecharge()
    }
  }
}
</script>

<style lang="scss" scoped>
.el-col-6 {
  height: 34px;
}
.time {
  margin-bottom: 10px;
}
.tabs_main {
  padding: 10px;
  //滚动条的宽度
  ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }

  //滚动条的滑块
  ::-webkit-scrollbar-thumb {
    background-color: #a1a3a9;
    border-radius: 3px;
  }
  .el-tab-pane{
    .el-form.el-form--inline{
      width:100%;
    }
      .el-form-item--mini.el-form-item, .el-form-item--small.el-form-item{
        margin-bottom: 5px;
      }
  }
  .page {
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>